<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>IT事件管理系统</title>
    <link th:href="@{../css/layui.css}" href="../css/layui.css" rel="stylesheet" type="text/css">
<!--    <link th:href="@{../css/ite/common.css}" rel="stylesheet" type="text/css">-->
</head>
<body >

    <!--一页两用-->
<!--    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">-->
<!--        <legend>任务进程</legend>-->
<!--    </fieldset>-->
    <div th:fragment="qMission">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card layui-col-md12 layui-col-xs12">
                    <div class="layui-card-header">任务进程</div>
                    <div class="layui-card-body">
                        <div>申请人: <span th:text="${start.username}"></span></div>
                        <div>申请人工号: <span th:text="${start.userid}"></span></div>
                        <div>联系方式: <span th:text="${start.phone}"></span></div>
                        <div>任务状态: <span th:text="${start.state}"></span></div>
                        <!--折叠卡片开始-->
                        <div class="layui-collapse" lay-filter="test">
                            <div class="layui-colla-item">
                                <h2 class="layui-colla-title">详细信息</h2>
                                <div class="layui-colla-content">
                                    <div><b>事件类型: </b><span th:text="${start.type}"></span> </div>
                                    <div><b>事件描述: </b><span th:text="${start.description}"></span> </div>
                                    <div><b>物料ID: </b><span th:text="${start.itemid}"></span></div>
                                    <div><b>用户描述: </b><span th:text="${start.remark}"></span></div>
                                    <div><b>填单人: </b><span th:text="${start.adminuser}"></span></div>
                                    <div><b>图片描述:</b></div>
                                    <div class=""  id="photos" >
                                        <div><img th:each="url : ${imgUrls}" src="../images/face/0.gif" th:src="'../itevent/img/'+${url}" style="height: 8rem"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--折叠卡片结束-->
                    </div>
                </div>
            </div>
        </div>
            <div class="layui-col-md12 layui-col-xs12" style="margin-top: 3%">
                <ul class="layui-timeline">
                    <!--第二个参数包含状态变量
                   index:当前迭代对象的index（从0开始计算）
                count: 当前迭代对象的index(从1开始计算)
                size:被迭代对象的大小
                current:当前迭代变量
                even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算）
                first:布尔值，当前循环是否是第一个
                last:布尔值，当前循环是否是最后一个
                    -->
                    <li class="layui-timeline-item" th:each="step,stepState : ${ing}">
                        <!--如果是第一个才使用旋转图标-->
                        <i th:if="${stepState.first} ==true" class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
                        <i th:if="${stepState.first} !=true" class="layui-icon layui-timeline-axis"></i>

                        <div class="layui-timeline-content layui-text">
                            <div th:if="${stepState.last} !=true">
                                <h3 class="layui-timeline-title"><span th:text="${step.step}" ></span></h3>
                                <div>环节开始时间: <span th:text="${step.stepDate}"></span></div>
                                <div>当前处理人: <span th:text="${step.executorName}"></span></div>
                            </div>
                            <!--最后是事件的起始节点,用户填单时的时间-->
                            <div th:if="${stepState.last} ==true">
                                <h3 class="layui-timeline-title"><span th:text="${start.date}"></span></h3>
                                <p>
                                    用户发出申请 <i class="layui-icon"></i>
                                </p>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>
            <!--处理中才显示完成,和移交按钮-->

            <div th:if="${start.state} == '受理中' or ${start.state} == '处理中'">
            	<div class="layui-col-xs12 layui-col-xs-offset1" style="margin-left: -50px">
				    <label class="layui-form-label">备注</label>
				    <div class="layui-input-block">
					    	<input   name="remark" id="remark" class="layui-input"  lay-verify="" lay-filter="" style="margin-right: 10px"/>
				    </div>
			    </div>
                <div class="layui-col-xs10 layui-col-xs-offset1">
                    <div class="layui-col-xs5 ">
                        <button id="done" type="button" class="layui-btn layui-btn-primary layui-btn-fluid">完成</button>
                    </div>
                    <div class="layui-col-xs5 layui-col-xs-offset2">
                        <button id="move" data-method="notice" class="layui-btn layui-btn-fluid">移交</button>
                    </div>
                </div>
            </div>


    </div>
<!-- jQuery-->
<script th:src="@{../js/jquery-3.4.0.min.js}" type="text/javascript"></script>
<script th:src="@{../js/layui.js}"  type="text/javascript"></script>
<script th:inline="javascript">
    var qyid = [[${qyid}]];
    var uuid = [[${start.uuid}]];
    var start = [[${start}]];
    var personid = [[${session.personid}]]
</script>
<script th:src="@{../js/mission/qMission.js}" type="text/javascript"></script>

</body>
</html>
